<template>
  <v-app color="white">
    <v-app-bar app class="pl-12 white--text" height="100" flat color="white">
      <span class="toolbar-title black--text">医生预约</span>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn text class="navlink-btn font-weight-medium black--text" to="/">主页</v-btn>
        <v-btn text class="navlink-btn font-weight-medium black--text">我要预约</v-btn>
        <v-menu offset-y>
          <template v-slot:activator="{ on }">
            <v-btn icon class="px-10 navlink-btn font-weight-medium" v-on="on">
              <i class="fa fa-user-circle-o fa-lg black--text"></i>
            </v-btn>
          </template>
          <v-list width="150">
            <v-list-item v-for="(item, index) in items" :key="index" @click="toolbarDroplistAction(index)" :to="item.path">
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-app-bar>
    <v-content class="grey lighten-3">
      <v-container fill-height>
        <router-view />
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import Home from "./components/Home.vue";

export default {
  name: "App",
  components: {
    Home
  },
  data: () => ({
    //
    items: [{
        title: '登录',
        path: '/login'
      },
      {
        title: '注册',
        path: '/register'
      },
      {
        title: '我的信息',
        path: ''
      },
    ],
  }),
  methods: {
    toolbarDroplistAction (index) {
      return;
    }
  }
};
</script>

<style>
.toolbar-title {
  font-size: 25px;
  font-family: '微软雅黑', '黑体';
  letter-spacing: 5px;
  white-space: nowrap;
}

.navlink-btn {
  font-size: 18px !important;
}

body {
  font-family: '微软雅黑', '黑体';
}

.container.fill-height {
  align-items: start;
}
</style>